import React from "react";
import {Tabs} from 'antd';
import {mapIndexTabs} from "@/store/index/connect";
import {connect} from "react-redux";
const { TabPane } = Tabs;


class MyTabs extends React.Component{

    onChange = activeKey => {
        this.props.changeTabsData(this.props.tabsList, activeKey);
    };

    onEdit = (targetKey, action) => {
        this[action](targetKey);
    };

    remove = targetKey => {
        let { activeKey } = this.props;
        let lastIndex;
        this.props.tabsList.forEach((pane, i) => {
            if (pane.key === targetKey) {
                lastIndex = i - 1;
            }
        });
        const panes = this.props.tabsList.filter(pane => pane.key !== targetKey);
        if (panes.length && activeKey === targetKey) {
            if (lastIndex >= 0) {
                activeKey = panes[lastIndex].key;
            } else {
                activeKey = panes[0].key;
            }
        }
        this.props.changeTabsData(panes, activeKey);
    };

    renderPane = (pane) => {
        return (
            <TabPane tab={pane.title} key={pane.key}/>
        )
    }

    render() {
        console.log(this.props.tabsList);
        return (
            <Tabs
                hideAdd
                onChange={this.onChange}
                activeKey={this.props.activeKey}
                type="editable-card"
                animated={false}
                onEdit={this.onEdit}
                tabBarGutter={5}
            >
                {
                    this.props.tabsList.map(pane => {
                        return this.renderPane(pane);
                    })
                }
            </Tabs>
        );
    }
}
export default connect(mapIndexTabs.mapStateToProps, mapIndexTabs.mapDispatchToProps)(MyTabs);
